<template>
  <div class="head">
    <div class="menu">
      <div>
        <a href="/"> <img class="home-image" src="../../assets/images/logo.jpg" /> </a>
        <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal" background-color="#ffffff">
          <el-menu-item class="menu-item" style="font-size: 25px" index="/teacher">课堂</el-menu-item>
        </el-menu>
      </div>
      <div>
        <el-dropdown trigger="click" @command="handleCommand" style="float: right">
          <el-avatar class="headPortrait"  style="color: #000">{{name}}</el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setting"><a><i class="el-icon-s-tools" />个人设置</a></el-dropdown-item>
            <el-dropdown-item command="exit"><i class="el-icon-switch-button" />退出账户</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainHeader',
  data () {
    return {
      userName: '',
      student: {},
      tid: '',
      name: ''
    }
  },
  methods: {
    handleCommand (command) {
      if (command === 'setting') {
        const path = '/teacher/personalSetting?tid=' + this.tid
        this.$router.push(path)
      } else {
        sessionStorage.removeItem('tid')
        sessionStorage.removeItem('username')
        sessionStorage.removeItem('name')
        sessionStorage.removeItem('type')
        this.$router.push('/')
      }
    },
    getCookie (name) { // 获取指定名称的cookie值
      // // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
      // var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'))
      // if (arr != null) {
      //   // console.log(arr);
      //   return unescape(arr[2])
      // }
      // return null
    },
    delCookie (name) {
      var exp = new Date()
      exp.setTime(exp.getTime() - 1)
      var cval = this.getCookie(name)
      if (cval != null) { document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString() }
    }
  },
  watch: {

  },
  mounted () {
    const name = sessionStorage.getItem('name')
    this.name = name
    this.tid = sessionStorage.getItem('tid')
  }

}
</script>

<style scoped>
  * {
    font-size: 16px;
  }
  .head {
    height: 60px;
    background-color: #fff;
    color: #FFF;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  .menu {
    z-index: 2;
    height: 60px;
    padding: 0 4%;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }
  .headPortrait {
    float: right;
    margin-top: 10px;
  }
  .home-image {
    width: 96px;
    height: 24px;
    vertical-align: middle;
    margin-top: 16px;
    float: left;
  }
  .el-menu-demo {
    margin-left: 32px;
    float: left;
  }
  .menu-item {
    width: 100px;
    line-height: 72px;
    margin-right: 32px;
  }
</style>
